<template>
  <comNavigation>
    <template v-slot:title>
      找医生
    </template>
    <template v-slot:right>
      <span style="color: #16c2a3;">问诊记录</span>
    </template>
  </comNavigation>

  <div class="selectBox" @click="router.push('/search')">
    <comIcon style="font-size: 18px;vertical-align: middle;" name="icons-搜索" />
    搜一搜：疾病/症状/医生/健康知识
  </div>
  <div class="consultation">
    <div class="iconBox">
      <comIcon name="icons-home-ask-doctor" />
    </div>
    <div class="center">
      <h3 style="color: #16c2a3;">快速问医 无需等待</h3>
      <span style="font-size: 12px;color: #898989;">2w +名医在线问诊</span>
    </div>
    <div class="butBox" @click="router.push('/fastConsult')">
      <van-button round style="background-color: #e5f3f2;color: #16c2a3;border: none;" size="small">去咨询</van-button>
    </div>
  </div>
  <van-cell-group inset>
    <van-cell style="font-size: 12px;" @click="showBottom = true" title="按科室找医生">全部科室<van-icon
        name="arrow" /></van-cell>
  </van-cell-group>
  <van-popup v-model:show="showBottom" round position="bottom" closeable :style="{ height: '70%' }">
    <h3 style="text-align: center;">全部科室</h3>
    <div v-for="item in list">
      <h3 style="text-indent: 15px;">{{ item.name }}</h3>
      <div class="box1">
        <van-button v-for="items in item.child" class="divMin" size="mini">{{ items.name }}</van-button>
      </div>
    </div>
  </van-popup>
  <div class="iconList">
    <div @click="router.push({path:'/doctorList',query:{id:item.id,department:item.name}})" v-for="item in listChildren">
      <img style="width: 30px;display: block;margin: auto;margin-bottom:5px ;" :src="item.avatar" alt="">
      {{ item.name }}
    </div>
  </div>

</template>


<script setup lang="ts">
// 路由
import { useRouter } from 'vue-router';
const router = useRouter()
// 导航组件
import comNavigation from '@/components/common/com-navigationBar/com-navigation.vue'
// 图标组件
import comIcon from '@/components/common/com-icon/com-icon.vue'
import { getDepAAPI, getDepChildrenAAPI } from '@/api/home'
import { ref, onMounted } from 'vue'
const showBottom = ref(false)
const list = ref([])
const listChildren = ref([])
onMounted(async () => {
  const res = await getDepAAPI()
  list.value = res.data.data

listChildren.value=list.value[0].child



})
</script>

<style scoped lang="scss">
.selectBox {
  background-color: #FFFFFF;
  left: 5%;
  top: 65px;
  width: 90%;
  height: 40px;
  line-height: 40px;
  border-radius: 50px;
  text-indent: 8px;
  font-size: 16px;
  color: #B1B1B1;
  border: 2px solid #F5F5F5;
  margin: auto;
}

.consultation {
  width: 90%;
  height: 85px;
  margin: auto;
  background-color: #fafafa;
  border-radius: 25px;
  margin-top: 15px;
  display: flex;

  .iconBox {
    height: 100px;
    line-height: 100px;
    font-size: 40px;
  }

  .center {
    flex: 1;
    margin-left: 15px;

    h3 {
      margin: 0;
      padding: 0;
      margin-top: 25px;
    }
  }

  .butBox {
    height: 100px;
    line-height: 80px;
  }

}

.box1 {
  width: 90%;
  padding: 0 5%;
}

.divMin {
  margin: 5px 15px;
  padding: 15px;
  border: none;
  border-radius: 10px;
  background-color: #fafafa;
  font-size: 12px;
}

.iconList {
  width: 90%;
  padding-bottom: 15px;
  background-color: #fafafa;
  margin: auto;
  border-radius: 10px;

  div {
    display: inline-block;
    width: 25%;
    height: 50px;
    text-align: center;
    font-size: 12px;
    padding-top: 15px;
  }
}
</style>
